<template>
  <div id="comet">
    <div class="back">
      <el-row>
        <el-col :span="6">
          <el-input v-model="sendMessage1" />
        </el-col>
        <el-col :offset="1" :span="8">
          <el-button @click="sendMessageApi(1)">客户1</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-input v-model="sendMessage2" />
        </el-col>
        <el-col :offset="1" :span="8">
          <el-button @click="sendMessageApi(2)">客户2</el-button>
        </el-col>
      </el-row>
      <el-row>
        <span>客户1聊天框：</span>
        <el-input type="textarea" v-model="receiveMessage" :rows="5"/>
      </el-row>
    </div>
  </div>
</template>

<script>
import { cometSendMessage, cometReceiveMessage } from '@/api/instant-message/instant-message'

export default {
  name: 'comet',
  data () {
    return {
      sendMessage1: '',
      sendMessage2: '',
      receiveMessage: ''
    }
  },
  mounted () {
    this.receiveMessageApi()
  },
  methods: {
    receiveMessageApi () {
      cometReceiveMessage({
        sessionId: 1
      }).then(res => {
        if (res && res.data) {
          this.receiveMessage += (res.data + '\n')
        }
        this.receiveMessageApi()
      }).catch(() => {
        this.receiveMessageApi()
      })
    },
    sendMessageApi (sessionId) {
      cometSendMessage({
        sessionId: sessionId,
        data: sessionId === 1 ? this.sendMessage1 : this.sendMessage2
      }).then(res => {
        if (res && res.data) {
          this.$message.success('发送成功, sessionId: ' + sessionId)
        }
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#comet {
  .el-row {
    &:not(:first-child) {
      margin-top: 30px;
    }
    .el-textarea {
      margin-top: 5px;
    }
  }
}
</style>

<style lang="scss">
#comet {
  .back {
    input,textarea,button {
      background-color: rgba(0, 0, 0, 0);
      color: yellow;
    }
    button {
      color: white;
    }
  }
}
</style>
